<template>
    <div class="home">

        <div>
            <!--搜索区-->
            <el-input
                    v-model="data.inputUsernameValue"
                    placeholder="姓名"
                    :suffix-icon="User"
                    style="width: 200px;"
                    clearable />
            <el-input
                    v-model="data.inputIphoneValue"
                    placeholder="电话"
                    :suffix-icon="Iphone"
                    style="width: 200px;margin: 0px 10px"
                    clearable
            />
            <el-input
                    v-model="data.inputAddressValue"
                    placeholder="地址"
                    :suffix-icon="HomeFilled"
                    style="width: 200px;"
                    clearable
            />
        </div>

        <div style="margin: 10px 0px">
            <!--功能区-->

            <el-button type="primary" plain @click="addUser">新增&nbsp;&nbsp;<el-icon>
                <circle-plus/>
            </el-icon>
            </el-button>

            <!--新增按钮弹框-->
            <el-dialog v-model="data.dialogFormVisible" title="新增用户" width="35%">
                <el-form :model="data.form" label-width="120px">
                    <el-form-item label="用户名:">
                        <el-input v-model="data.form.username" style="width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="密码:">
                        <el-input v-model="data.form.password" style="width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称:">
                        <el-input v-model="data.form.nickName" style="width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄:">
                        <el-input v-model="data.form.age" style="width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="性别:">
                        <el-input v-model="data.form.sex" style="width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="电话:">
                        <el-input v-model="data.form.phone" style="width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="地址:">
                        <el-input type="textarea" v-model="data.form.address" style="width: 90%"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelAdd">取消</el-button>
        <el-button type="primary" @click="confirmAdd"
        >确认</el-button
        >
      </span>
                </template>
            </el-dialog>


            <!--编辑按钮弹框-->
            <el-dialog v-model="data.editDialogFormVisible" title="修改用户" width="35%">
                <el-form :model="data.editform" label-width="120px">
                    <el-form-item label="用户名:">
                        <el-input v-model="data.editform.username" style="width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="密码:">
                        <el-input v-model="data.editform.password" style="width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称:">
                        <el-input v-model="data.editform.nickName" style="width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄:">
                        <el-input v-model="data.editform.age" style="width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="性别:">
                        <el-input v-model="data.editform.sex" style="width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="电话:">
                        <el-input v-model="data.editform.phone" style="width: 90%"></el-input>
                    </el-form-item>
                    <el-form-item label="地址:">
                        <el-input type="textarea" v-model="data.editform.address" style="width: 90%"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelEdit">取消</el-button>
        <el-button type="primary" @click="confirmEdit"
        >确认</el-button
        >
      </span>
                </template>
            </el-dialog>


            <!--导入-->

            <el-upload
                    style="display: inline-block;"
                    action="http://124.221.133.96:9090/user/import"
                    :accept="data.xlsx"
                    :show-file-list="false"
                    :on-success="handleFileSuccess"
            >
                <el-button style="margin-left: 10px" type="primary" plain>导入&nbsp;&nbsp;<el-icon>
                    <Bottom/>
                </el-icon>
                </el-button>

            </el-upload>



            <el-button type="primary" style="margin-left: 10px" plain @click="exportFile">导出&nbsp;&nbsp;<el-icon>
                <Upload/>
            </el-icon>
            </el-button>
        </div>

        <!--表格区-->
        <el-table :data="data.tableData" stripe>
            <el-table-column sortable prop="id" label="编号"/>
            <el-table-column prop="username" label="用户名"/>
            <el-table-column prop="username" label="昵称"/>
            <el-table-column prop="phone" label="电话"/>
            <el-table-column prop="address" label="地址"/>
            <el-table-column fixed="right" label="操作">
                <template #default="scope">
                    <el-button type="text" size="small" @click="handleEdit(scope.row)"
                    >编辑
                    </el-button
                    >
                    <el-popconfirm
                            title="你确定删除该信息吗?"
                            @confirm="confirmEvent(scope.row)"
                            >
                        <template #reference>
                            <el-button type="text" size="small"
                            >删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-block" style="margin-top: 10px">
            <el-pagination
                    :currentPage="data.currentPage"
                    :page-size="data.pageSize"
                    :page-sizes="[5, 10, 15, 20]"
                    :small="data.small"
                    :background="data.background"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="data.total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script setup>
    import request from '../utils/request'
    import {Search, Iphone, User, HomeFilled, CirclePlus, Upload, Download ,Bottom} from '@element-plus/icons-vue'
    import {ref, reactive, onMounted,watch} from 'vue'
    import axios from 'axios'
    import { ElMessage } from 'element-plus'




    const addUser = () => {
        data.form = {}
        data.dialogFormVisible = true
    }
    const cancelAdd = () => {
        data.dialogFormVisible = false
    }

    const handleEdit = (row) => {
        data.editform = row
        data.editDialogFormVisible = true
    }
    const cancelEdit = () => {
        data.editDialogFormVisible = false
    }

    const data = reactive(
        {
            dialogFormVisible: false,
            editDialogFormVisible: false,
            background: false,
            small: false,
            xlsx: 'xlsx',


            inputUsernameValue: '',
            inputIphoneValue: '',
            inputAddressValue: '',
            tableData: [],
            form: {},
            editform: {},
            currentPage: 1,
            pageSize: 5,
            total: 10
        }
    )




    onMounted(() => {
        getData()
    })
    const getData = () => {
        request.get('/user/page',{
            params: {
                pageNum: data.currentPage,
                pageSize: data.pageSize,
                username: data.inputUsernameValue,
                phone: data.inputIphoneValue,
                address: data.inputAddressValue
            }
        })
            .then((res) => {
                // console.log(res)
                data.tableData = res.records
                data.total = res.total
            })
    }

    const confirmAdd = () => {
        request.post('/user/save',data.form)
            .then((res) => {
                if (res.code === 200) {
                    ElMessage({
                        showClose: true,
                        message: '新增成功',
                        type: 'success',
                    })
                    getData()
                    data.form = {}
                }else {
                    ElMessage({
                        showClose: true,
                        message: '服务器维护中',
                        type: 'error',
                    })
                }
            })
        data.dialogFormVisible = false

    }

    const confirmEdit = () => {

        request.put('/user/updateById',data.editform)
            .then((res) => {
                if (res.code === 200) {
                    ElMessage({
                        showClose: true,
                        message: '修改成功',
                        type: 'success',
                    })
                    getData()
                    data.editDialogFormVisible = false
                }else {
                    ElMessage({
                        showClose: true,
                        message: '服务器维护中',
                        type: 'error',
                    })
                    getData()
                    data.editDialogFormVisible = false
                }
            })
    }

    // 删除按钮
    const confirmEvent = (row) => {
        // http://localhost:9090/user/delete?id=8
        request.delete('/user/delete?id='+row.id)
            .then((res) => {
                if (res.code === 200) {
                    ElMessage({
                        showClose: true,
                        message: '删除成功',
                        type: 'success',
                    })
                    getData()
                }else {
                    ElMessage({
                        showClose: true,
                        message: '服务器维护中',
                        type: 'error',
                    })
                }
            })
    }

    const handleSizeChange = (val) => {
        data.pageSize = val
        getData()
    }
    const handleCurrentChange = (val) => {
        data.currentPage = val
        getData()
    }

    watch(
        () => [data.inputUsernameValue,data.inputIphoneValue,data.inputAddressValue],
        (count, prevCount) => {
            if( count[0]==''|| count[1]=='' || count[2]==''){
                getData()
            }
        }
    );

    //导出（下载）
    const exportFile = () => {
        window.open("http://124.221.133.96:9090/user/export")
    }
    //导入
    const handleFileSuccess = () => {
        ElMessage({
            showClose: true,
            message: '导入成功',
            type: 'success',
        })
        getData()
    }



</script>

<style>
    .home {
        padding: 10px;
    }

    .el-table {
        border-radius: 10px;
        box-shadow: 10px 10px 10px #a7a7a7;
    }

</style>